<template>
    <page-header-wrapper :title="false">
      <a-card
        :tab-list="tabList"
        :active-tab-key="activeKey"
        @tabChange="key => onTabChange(key)"
      >
        <template slot="extra">
          <a-button size="small" type="primary" @click="$router.push({ name: 'ScheduleUserList' })">排班设置</a-button>
        </template>
<!--        <div class="table-page-search-wrapper">-->
<!--          <a-form-model :model="queryParam" layout="inline">-->
<!--            <a-row :gutter="20">-->
<!--              <a-col :md="6" :sm="24">-->
<!--                <a-form-model-item label="组长姓名">-->
<!--                  <a-select-->
<!--                    show-search-->
<!--                    v-model="queryParam['lid']"-->
<!--                    placeholder="选择组长姓名"-->
<!--                    :filter-option="filterOption"-->
<!--                  >-->
<!--                    <a-select-option v-for="(item,index) in adviserOpts" :key="index" :value="index">{{item}}</a-select-option>-->
<!--                  </a-select>-->
<!--                </a-form-model-item>-->
<!--              </a-col>-->
<!--              <a-col :md="6" :sm="24">-->
<!--                <a-form-model-item label="入职时间">-->
<!--                  <a-range-picker @change="onChange" />-->
<!--                  <a-select-->
<!--                    show-search-->
<!--                    v-model="queryParam['filter[uid]']"-->
<!--                    placeholder="选择顾问姓名"-->
<!--                    :filter-option="filterOption"-->
<!--                  >-->
<!--                    <a-select-option v-for="(item,index) in adviserOpts" :key="index" :value="index">{{item}}</a-select-option>-->
<!--                  </a-select>-->
<!--                </a-form-model-item>-->
<!--              </a-col>-->
<!--              <a-col :md="6" :sm="24">-->
<!--              <span class="table-page-search-submitButtons">-->
<!--                <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>-->
<!--              </span>-->
<!--              </a-col>-->
<!--            </a-row>-->
<!--          </a-form-model>-->
<!--        </div>-->
        <s-table
          bordered
          ref="table"
          :row-key="(record) => record.uid"
          :columns="activeColumns"
          :data="memberData"
        >
          <div
            slot="filterSelect"
            slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
            style="padding: 8px"
          >
            <a-select
              :placeholder="`选择${column.title}`"
              style="width: 188px; margin-bottom: 8px; display: block;"
              :value="selectedKeys[0]"
              @change="(value) => setSelectedKeys(value ? [value] : [])"
              @pressEnter="() => handleSelect(selectedKeys, confirm, column.dataIndex)"
            >
              <a-select-option v-for="(item,index) in adviserOpts" :key="index" :value="index">{{item}}</a-select-option>
            </a-select>
            <a-button
              type="primary"
              icon="search"
              size="small"
              style="width: 90px; margin-right: 8px"
              @click="() => handleSelect(selectedKeys, confirm, column.dataIndex)"
            >
              搜索
            </a-button>
            <a-button size="small" style="width: 90px" @click="() => handleReset(clearFilters, column.dataIndex)">
              重置
            </a-button>
          </div>
          <div
            slot="filterRange"
            slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
            style="padding: 8px"
          >
            <a-range-picker
              style="width: 228px; margin-bottom: 8px; display: block;"
              :value="createValue"
              @change="onChange"
            />
            <a-button
              type="primary"
              icon="search"
              size="small"
              style="width: 110px; margin-right: 8px"
              @click="() => handleRange(selectedKeys, confirm, column.dataIndex)"
            >
              搜索
            </a-button>
            <a-button size="small" style="width: 110px" @click="() => rangeReset(clearFilters)">
              重置
            </a-button>
          </div>
          <div
            slot="filterDropdown"
            slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
            style="padding: 8px"
          >
            <a-input
              v-ant-ref="c => (searchInput = c)"
              :placeholder="`搜索${column.title}`"
              :value="selectedKeys[0]"
              style="width: 188px; margin-bottom: 8px; display: block;"
              @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
              @pressEnter="() => handleSearch(selectedKeys, confirm, column.dataIndex)"
            />
            <a-button
              type="primary"
              icon="search"
              size="small"
              style="width: 90px; margin-right: 8px"
              @click="() => handleSearch(selectedKeys, confirm, column.dataIndex)"
            >
              搜索
            </a-button>
            <a-button size="small" style="width: 90px" @click="() => handleReset(clearFilters, column.dataIndex)">
              重置
            </a-button>
          </div>
          <template slot="group_type" slot-scope="text">
            {{typeOpts[text]}}
          </template>
          <template slot="uid" slot-scope="text, record">
            <a-tag color="red" v-if="record.not_sst == 1">新秀</a-tag>
            {{adviserOpts[text]}}
          </template>
          <template slot="jr_yj" slot-scope="text, record">
            <a-tag color="red" v-if="activeKey == 1">{{record.jr_yj}}</a-tag>
            <a-tag color="red" v-if="activeKey == 2">{{record.dy_yj}}</a-tag>
            <a-tag color="red" v-if="activeKey == 3">{{record.sy_yj}}</a-tag>
            <a-tag color="red" v-if="activeKey == 4">{{record.jr_ts}}</a-tag>
            <a-tag color="red" v-if="activeKey == 5">{{record.dy_ts}}</a-tag>
            <a-tag color="red" v-if="activeKey == 6">{{record.sy_ts}}</a-tag>
            <a-tag color='red' v-if='activeKey == 7'>{{record.jr_lx}}</a-tag>
            <a-tag color='red' v-if='activeKey == 8'>{{record.dy_lx}}</a-tag>
            <a-tag color='red' v-if='activeKey == 9'>{{record.sy_lx}}</a-tag>
          </template>
          <template slot="action" slot-scope="text,record">
            <a-button type="primary" size="small" @click="toDetail(record.uid)">详情</a-button>
          </template>
        </s-table>
      </a-card>
    </page-header-wrapper>
</template>

<script>
  import { STable } from '@/components'
  import col from '@/columns/member'
  import { getMemberList } from '@/api/member'
  const columns1 = col.list1
  const columns2 = col.list2
  const columns3 = col.list3
  const columns4 = col.ts1
  const columns5 = col.ts2
  const columns6 = col.ts3
  const columns7 = col.lx1
  const columns8 = col.lx2
  const columns9 = col.lx3

  export default {
    components: {
      STable
    },
    name: 'MemberList',
    data () {
      return {
        columns1,
        columns2,
        columns3,
        columns4,
        columns5,
        columns6,
        columns7,
        columns8,
        columns9,
        activeColumns: [],
        memberData: parameters => {
          return getMemberList(Object.assign(parameters, this.queryParam)).then(res => {
            this.adviserOpts = res.result.adviser_array
            this.typeOpts = res.result.group_type
            return res.result
          })
        },
        loading: true,
        adviserOpts: {},
        typeOpts: {},
        queryParam: {},
        tabList: [
          {
            key: '1',
            tab: '当日业绩'
          },
          {
            key: '2',
            tab: '当月业绩'
          },
          {
            key: '3',
            tab: '上月业绩'
          },
          {
            key: '4',
            tab: '当日通时'
          },
          {
            key: '5',
            tab: '当月通时'
          },
          {
            key: '6',
            tab: '上月通时'
          },
          {
            key: '7',
            tab: '当日领新'
          },
          {
            key: '8',
            tab: '当月领新'
          },
          {
            key: '9',
            tab: '上月领新'
          }
        ],
        activeKey: '1',
        searchedColumn: '',
        searchText: '',
        searchInput: null,
        createValue: []
      }
    },
    created () {
      this.queryParam['filter[type]'] = this.activeKey
      this.activeColumns = this.columns1
    },
    // activated () {
    //   this.activeKey = '1'
    //   this.queryParam['filter[type]'] = this.activeKey
    //   this.activeColumns = this.columns1
    //   this.$refs.table.refresh(true)
    // },
    methods: {
      onChange (date, dateString) {
        this.createValue = date
        this.queryParam['filter[begin_hiredate_time]'] = dateString[0]
        this.queryParam['filter[end_hiredate_time]'] = dateString[1]
      },
      toDetail (id) {
        this.$router.push({ name: 'MemberDetail', params: { id } })
      },
      filterOption (input, option) {
        return (option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0)
      },
      onTabChange (key) {
        this.activeKey = key
        this.queryParam['filter[type]'] = key
        this.activeColumns = this['columns' + key]
        this.searchText = ''
        this.searchedColumn = ''
        this.$refs.table.refresh(true)
      },
      handleSearch (selectedKeys, confirm, dataIndex) {
        confirm()
        this.searchText = selectedKeys[0]
        this.searchedColumn = dataIndex
        this.queryParam['filter[' + dataIndex + ']'] = selectedKeys[0]
      },
      handleSelect (selectedKeys, confirm, dataIndex) {
        confirm()
        this.searchText = selectedKeys[0]
        this.searchedColumn = dataIndex
        this.queryParam['filter[' + dataIndex + ']'] = selectedKeys[0]
      },
      handleRange (selectedKeys, confirm, dataIndex) {
        confirm()
        this.searchText = selectedKeys[0]
        this.searchedColumn = dataIndex
        this.$refs.table.refresh(true)
      },
      handleReset (clearFilters, dataIndex) {
        clearFilters()
        delete this.queryParam['filter[' + dataIndex + ']']
      },
      rangeReset (clearFilters) {
        clearFilters()
        this.createValue = []
        delete this.queryParam['filter[begin_hiredate_time]']
        delete this.queryParam['filter[end_hiredate_time]']
        this.$refs.table.refresh(true)
      }
    }
  }
</script>

<style scoped>

</style>
